<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <script src="https://cdn.jsdelivr.net/npm/echarts@5.4.3/dist/echarts.min.js"></script>
  <style>
    #main {
      width: 1200px;
      height: 800px;
    }

    .container {
      height: 100px;
      overflow: hidden;
      position: relative;
    }

    .item {
      height: 20px;
    }

    .box {
      position: absolute;
      top: 0;
      left: 0;
      animation: move 5s infinite 1s linear;
    }

    @keyframes move {
      0% {
        top: 0
      }

      100% {
        top: calc(100px - 400px)
      }
    }
  </style>
</head>

<body>
  <div class="container">

    <ul class="box">
      <li class="item">1</li>
      <li class="item">2</li>
      <li class="item">3</li>
      <li class="item">4</li>
      <li class="item">5</li>
      <li class="item">6</li>
      <li class="item">7</li>
      <li class="item">8</li>
      <li class="item">9</li>
      <li class="item">10</li>
      <li class="item">11</li>
      <li class="item">12</li>
      <li class="item">13</li>
      <li class="item">14</li>
      <li class="item">15</li>
      <li class="item">16</li>
      <li class="item">17</li>
      <li class="item">18</li>
      <li class="item">19</li>
      <li class="item">20</li>
    </ul>
  </div>
  <div id="main"></div>
  <script src="./index.js"></script>
  <script src="./theme.js"></script>
  <script>
    echarts.registerMap('china', china)
    echarts.registerTheme('aaa', theme)
    const points = china.features.map((item, index) => ({
      name: item.properties.name,
      value: item.properties.center,
      itemStyle: {
        color: index > 10 ? '#f00' : '#ff0'
      }
    }))
    //     {
    //       coords: [
    //         [120, 66],  // 起点
    //         [122, 67]   // 终点
    //       ],
    // }
    const coords = china.features.map(item => ({
      coords: [item.properties.center, [116.405285, 39.904989]]
    })).slice(1)
    const myEcharts = echarts.init(document.getElementById('main'), 'aaa')
    const option = {
      geo: {
        map: 'china',
        roam: true
      },
      series: [
        {
          type: 'effectScatter',
          rippleEffect: {
            color: '',
            scale: 5
          },
          coordinateSystem: 'geo',
          label: {
            formatter: '{b}',
            show: true,
            color: '#000',
            position: 'right'
          },
          data: points.slice(0, 10)
        }, {
          type: 'effectScatter',
          rippleEffect: {
            color: '',
            scale: 2.5
          },
          coordinateSystem: 'geo',
          label: {
            formatter: '{b}',
            show: true,
            color: '#000',
            position: 'right'
          },
          data: points.slice(10)
        }, {
          type: 'lines',
          data: coords,
          lineStyle: {
            curveness: 0.4,
            color: '#fff',
            opacity: 0.1,

            width: 3
          },
          effect: {
            symbol: 'circle',
            show: true,
            symbolSize: 5,
            color: '#fff'
          }
        }
      ]
    }

    myEcharts.setOption(option)
  </script>
</body>

</html>